<template>
    <!--表格是动态生成的，根据上方的card的内容动态改变  -->
    <table class="table table-sm table-bordered" style="width: 90%;">
        <thead>
            <tr>
                <!-- 商品规格占1行，其余的占两行rowspan  colspan="2"占满两列，-->
                <!-- 商品规格占多少列colspan，取决于有多少个规格卡片 -->
                <th scope="col" class="text-center" style="vertical-align: middle;" v-for="(th, i) in tableThs" :key="i"
                    :rowspan="th.rowspan" :colspan="th.colspan ? th.colspan : '1'" :width="th.width">{{ th.name }}</th>
            </tr>
            <tr>
                <th scope="col" class="text-center" style="vertical-align: middle;" v-for="(th, thi) in skuLabels"
                    :key="thi" rowspan="1" :colspan="1">{{ th.name }}</th>
            </tr>
        </thead>
        <tbody>
            <!-- 直接用tableData中的数据进行渲染是不行的，因为不能进行v-model中的操作，于是添加可监听 -->
            <tr v-for="(item, index) in list" :key="index">
                <!-- 商品规格 -->
                <th scope="row" v-for="(sku, skuI) in item.skus" :key="skuI" class="text-center">
                     {{  sku.value}}
                </th>
                <td class="text-center" style="width: 100px;">
                    <span v-if="!item.image" class="btn btn-light border" @click="chooseImage(item)">
                        <i class="el-icon-plus"></i>
                    </span>
                    <img v-else :src="item.image" class="border" style="width:45px;height:45px;cursor:pointer"
                        @click="chooseImage(item)" />
                </td>
                <!-- <td class="text-center" width="100">
                    <input type="number" :value="item.pprice" class="form-control text-center"/>
                </td> -->
                <td class="text-center" width="100">
                    <input type="number" v-model="item.pprice" class="form-control text-center" />
                </td>

                <td class="text-center" width="100"><input type="number" v-model="item.oprice"
                        class="form-control text-center" /></td>
                <td class="text-center" width="100"><input type="number" v-model="item.cprice"
                        class="form-control text-center" /></td>
                <td class="text-center" width="100"><input type="number" v-model="item.stock"
                        class="form-control text-center" /></td>
                <td class="text-center" width="100"><input type="number" v-model="item.volume"
                        class="form-control text-center" /></td>
                <td class="text-center" width="100"><input type="number" v-model="item.weight"
                        class="form-control text-center" /></td>
                <td class="text-center" width="100"><input type="text" v-model="item.code"
                        class="form-control text-center" /></td>
            </tr>
        </tbody>
    </table>
</template>
<script>
import { mapGetters, mapState } from 'vuex'


export default {
    inject:['app'],
    data() {
        return {
            // 重要的是这个list，提交到后端的时候
            list: []
        }
    },
    computed: {
        ...mapGetters('goods_create', ['tableThs', 'tableData', 'skuLabels']),
        ...mapState('goods_create', {
            sku_card: state => state.sku_card
        }),
    },
    watch: {
        // 当list中的值更新时，就让此处的list为新的值
        tableData(newValue) {
            //   console.log(newValue); 
            this.list = newValue;
        }
    },
    mounted() {
        //  console.log(this.tableThs)
        //  console.log(this.tableData)
        // console.log(this.tableData);

        // 项目挂载时，就让list数组指向tableData
        this.list = this.tableData
    },
    methods:{
        // 选择图片
        chooseImage(item) {
            // 下面的chooseImage是来自于app.vue中的函数
            // 传递max参数为3，即最大选中chooseImage=3
            this.app.chooseImage((res) => {
                //  不能使用vModel因为文中没有
                 item.image = res[0].url

            }, 3);
        }
    }
}
</script>
<style scoped>
.table {
    margin-bottom: 70rem;
}

.table th,
.table td {
    padding: 0.5rem;
    vertical-align: middle;
}

.form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
</style>